<template>
  <div>

    <RoleSearch @add-role="addRole" @batch-remove="batchRemove"/>

    <!-- 引入表格 -->
    <Table border :columns="columns" :data="data" @on-selection-change="selection = $event">

      <template #action="{ row, index }">
        <Button type="success" size="small" style="margin-right: 5px" @click="showPermission(row)">分配权限</Button>
        <Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="editRole(row)">
          修改
        </Button>
        <Button type="error" icon="ios-remove-circle-outline"
                size="small" @click="remove(row, index)">移除
        </Button>
      </template>

      <template #status="{ row, index }">
        <DotTag type="primary" v-if="row.state">正常</DotTag>
        <DotTag type="error" v-else>失效</DotTag>
      </template>

      <template #name="{row}">
        <strong>{{ row.name }}</strong>
        <Tag color="primary" v-if="row.defaultRole">默认</Tag>
      </template>

    </Table>

    <Drawer
        :title="drawer.title"
        v-model="drawer.state"
        width="720"
        @on-close="closeWin(false)"
        :mask-closable="false"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
      <!-- 引入角色表单组件 -->
      <RoleForm ref="roleForm" @close-win="closeWin" :drawer="drawer.row"></RoleForm>
    </Drawer>

    <PermissionTree ref="permission" v-model="permission.state" :role-id="permission.roleId" />

  </div>
</template>
<script>
import RoleForm from '../components/role/RoleForm.vue'
import PermissionTree from '../components/role/PermissionTree.vue'
import DotTag from '../components/DotTag.vue'
import RoleSearch from "@/components/role/RoleSearch.vue";



export default {
  data() {
    return {
      drawer: {
        state: false,
        title: "" ,
        row: { name: "", remark: "", description: "", state: true},
      },
      selection: [],
      permission: {
         state: false ,
         roleId: -1,
      },
      columns: [
        {type: 'selection',width: 60},
        {title: '角色名', slot: 'name'},
        {title: '角色标识', key: 'remark'},
        {title: '角色描述', key: 'description'},
        {title: '状态', slot: 'status', width: 100},
        {title: '操作', slot: 'action', width: 280, align: 'center'}
      ],
      data: [
        {
          id: 1,
          name: '超级管理员',
          description: '拥有系统最高权限',
          flag: 'SUPER_ADMIN',
          defaultRole: false,
          state: true,
        },
        {
          id: 2,
          name: '管理员',
          description: '系统管理员、拥有较高的操作权限',
          remark: 'ADMIN',
          defaultRole: false,
          state: true,
        },
        {
          id: 3,
          name: '普通用户',
          description: '普通用户拥有相对较小的权限',
          remark: 'USER',
          defaultRole: true,
          state: true,
        },
      ],
    }
  },
  methods: {
    addRole(){
      this.drawer.state = true ;
      this.drawer.title = "添加角色" ;
      this.drawer.row = { name: "", remark: "", description: "", state: true, defaultRole: false} ;
    },
    editRole(row) {
      this.drawer.state = true ;
      this.drawer.title = "修改角色" ;
      this.drawer.row = {...row} ;
    },
    batchRemove() {
      if (this.selection.length === 0) {
        this.$tips.warning("请至少选中一个需要删除的角色");
      }else{
        this.$tips.confirm("您确定要删除选中的所有角色吗?").then(() => {
          // 删除多个角色
          console.log(this.selection.map(role => role.id));
        })
      }
    },

    remove(row, index) {
      this.$tips.confirm("您确定要删除该角色吗?").then(() => {
        this.data.splice(index, 1);
      })
    },
    showPermission(row) {
      this.permission.state = true;
      this.permission.roleId = row.id ;
    },

    closeWin(status) {
       this.drawer.state = false ;
       this.$refs.roleForm.resetValidForm();
    }
  },
  components: {
    RoleForm,
    PermissionTree,
    DotTag,
    RoleSearch
  },
  computed: {
    treeBtn() {
      return this.treeBtnList[this.treeBtnIndex % 2];
    }
  }
}
</script>

